<template>
  <div class="register">
    <h4>用户注册</h4>
    <van-form @submit="onSubmit">
      <van-field
        v-model="state.userName"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="state.userPwd"
        type="password"
        name="userPwd"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="state.job"
        name="job"
        label="用户岗位"
        placeholder="用户岗位"
        :rules="[{ required: true, message: '请填写用户岗位' }]"
      />
      <van-field
        v-model="state.userEmail"
        name="userEmail"
        label="用户邮箱"
        placeholder="用户邮箱"
        :rules="[{ required: true, message: '请填写用户邮箱' }]"
      />
      <van-field
        v-model="state.mobile"
        name="mobile"
        label="用户手机号"
        placeholder="用户手机号"
        :rules="[
          { pattern: mobile, required: true, message: '请填写正确手机号' },
        ]"
      />

      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="state.sex" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="state" label="状态">
        <template #input>
          <van-radio-group v-model="state.state" direction="horizontal">
            <van-radio name="1">在职</van-radio>
            <van-radio name="2">离职</van-radio>
            <van-radio name="3">试用期</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="role" label="角色">
        <template #input>
          <van-radio-group v-model="state.role" direction="horizontal">
            <van-radio name="0">系统管理员</van-radio>
            <van-radio name="1">普通用户</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { reactive } from "vue";
import { regin } from "../../api/audit/audit";
export default {
  data() {
    return {};
  },
  setup() {
    const state = reactive({
      userName: "",
      userPwd: "",
      sex: "0",
      state: "1",
      role: "0",
      job: "",
      mobile: "",
      userEmail: "",
      deptId: [],
      roleList: [],
    });
    const onSubmit = (values) => {
      //console.log("submit", values);
      regin({
        ...values,
      }).then(
        (res) => {
          console.log(res.data);
        },
        (err) => {
          console.log(err);
        }
      );
    };
    // 校验函数返回 true 表示校验通过，false 表示不通过
    const mobile = /^1[3-9][0-9]{9}$/;
    return {
      state,
      mobile,
      onSubmit,
    };
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.user {
  width: 100%;
  height: 40px;
  background: sandybrown;
}
</style>